import {CCard} from '@/components/card'
import ParamsBar from '@/components/echarts/paramsBar'
import {DeviceName, DeviceStatusOfStatus, IconImg, ParamOfStatus} from '@/components/image'
import {CItem} from '@/components/item'
import {DeviceConfigByCard} from '@/components/others/deviceConfig'
import RollerDigital from '@/components/rollerDigital'
import {CnBoldSpan, CnMediumSpan, CnNormalP, CnNormalSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import {colorLuminance} from '@/libs/neumorphism'
import {toSingleDevParams} from '@/libs/pageRedirect'
import {paramStatus2Color, ratio2color} from '@/libs/text2Color'
import {PropType} from 'vue'

const ConfigInofItem = defineComponent({
  props: {
    btnText: String,
    title: String,
    onClick: Function
  },
  setup(props, ctx) {
    return () => (
      <div class='h-42 flex justify-between items-center'>
        <div>
          <IconImg imgName='standard-sm' class='inline-block mr-10'></IconImg>
          <CnNormalSpan class='text-text'>{props.title || ''}</CnNormalSpan>
        </div>
        <a-button class='bg-primaryLight h-28' onClick={() => props.onClick && props.onClick()}>
          <CnNormalSpan class='text-primaryHalf cursor-pointer text-12'>
            {props.btnText || ''}
          </CnNormalSpan>
        </a-button>
      </div>
    )
  }
})

export const DeviceCard = defineComponent({
  props: {
    devData: {
      type: Object as PropType<DataOverview.DeviceListData>,
      required: true
    }
  },
  setup(props, ctx) {
    const paramList = computed(() =>
      props.devData.checkDataRatioPackList.map(item => item.paramName)
    )

    const normalRatioList = computed(() =>
      props.devData.checkDataRatioPackList.map(item => ({
        name: item.paramName,
        toolTipConentLeftText: item.paramName + '正常占比',
        value: item.normalRatio
      }))
    )

    const exceptionRatioList = computed(() =>
      props.devData.checkDataRatioPackList.map(item => ({
        name: item.paramName,
        toolTipConentLeftText: item.paramName + '异常占比',
        value: -item.exceptionRatio
      }))
    )

    return () => (
      <CCard
        id={props.devData.devId ? `${props.devData.devId}` : undefined}
        class='col-span-1 w-full rounded-4 bg-white overflow-hidden flex flex-col'
        title={props.devData.devName}
        v-slots={{
          title: () => (
            <div class='w-full h-full flex justify-between items-center'>
              <CnBoldSpan>{props.devData.beLongUser}</CnBoldSpan>
              <DeviceStatusOfStatus status={props.devData.devStatusCode}>
                <CnBoldSpan class='text-16'>{props.devData.devStatus}</CnBoldSpan>
              </DeviceStatusOfStatus>
            </div>
          )
        }}
      >
        {/* 水质分析 */}
        <div class='h-92 mt-22 flex items-center'>
          <WaterTarget
            id={'deviceTarget' + props.devData.devId}
            radius={25}
            range={(props.devData.nowStandRatio / 100) * 360}
            borderColor={[
              paramStatus2Color(props.devData.checkResult),
              colorLuminance(paramStatus2Color(props.devData.checkResult), 0.1)
            ]}
            showDashed={false}
            borderWidth={3}
          >
            <RollerDigital
              class='text-15'
              style={{
                color: paramStatus2Color(props.devData.checkResult)
              }}
              endVal={props.devData.nowStandRatio}
              bold={false}
            ></RollerDigital>
          </WaterTarget>
          <div class='flex-1 ml-24'>
            <div>
              <DeviceName class='mr-16'>{props.devData.devName}</DeviceName>
              <CnBoldSpan
                style={{
                  color: paramStatus2Color(props.devData.checkResult)
                }}
              >
                {props.devData.checkResult}
              </CnBoldSpan>
            </div>
            <div>
              {props.devData.paramList.map((param, idx) => (
                <ParamOfStatus
                  class={[idx !== props.devData.paramList.length - 1 ? 'mr-16' : '']}
                  status={param.paramStatus || ''}
                >
                  {param.paramName}
                </ParamOfStatus>
              ))}
            </div>
          </div>
          <div class='h-full flex items-center'>
            <a-button
              class='bg-primaryLight text-primary h-28'
              onClick={() => toSingleDevParams({devId: props.devData.devId})}
            >
              <CnMediumSpan class='text-12 text-primary'>查看水质</CnMediumSpan>
            </a-button>
          </div>
        </div>

        {/* 参数图表 */}
        <ParamsBar
          id={'singleParamBar-' + props.devData.devId}
          width='100%'
          height='330px'
          paramEchartData={[paramList.value, normalRatioList.value, exceptionRatioList.value]}
        ></ParamsBar>

        {/* 配置信息 */}
        {/* <div class='mt-22'>
          <div class='w-full h-80 flex items-center'>
            <WaterTarget
              id={'deviceConfigInfo-' + props.devData.devId}
              radius={25}
              borderWidth={3}
              range={((props.devData.onlineTimeRatio || 0) / 100) * 360}
              borderColor={[
                ratio2color(props.devData.onlineTimeRatio),
                colorLuminance(ratio2color(props.devData.onlineTimeRatio), 0.1)
              ]}
              showDashed={false}
            >
              <RollerDigital
                class='text-15'
                endVal={props.devData.onlineTimeRatio}
                bold={false}
                style={{
                  color: ratio2color(props.devData.onlineTimeRatio)
                }}
              ></RollerDigital>
            </WaterTarget>
            <DeviceName class='mx-16'>{props.devData.devName}</DeviceName>
            <CnBoldSpan
              style={{
                color: ratio2color(props.devData.onlineTimeRatio)
              }}
            >
              {props.devData.devOnlineStatus}
            </CnBoldSpan>
          </div>
          <div class='pl-66'>
            <ConfigInofItem
              title={`标准设置` + (props.devData.standSetStatus || '未配置')}
              btnText='设置标准'
            ></ConfigInofItem>
            <ConfigInofItem
              title={`数据采集` + (props.devData.dataSetStatus || '未配置')}
              btnText='设置采集'
            ></ConfigInofItem>
            <ConfigInofItem
              title={`报警设置` + (props.devData.standSetStatus || '未配置')}
              btnText='设置报警'
            ></ConfigInofItem>
          </div>
        </div> */}
        <DeviceConfigByCard devData={props.devData} class='mt-22'></DeviceConfigByCard>

        {/* 底部信息 包含异常信息 分享信息 位置信息 */}
        <div class='w-full mt-36'>
          <div class='h-21 flex justify-end items-center mb-12'>
            <CnNormalSpan class='h-full text-text mr-10'>
              本周内警报
              {/* <CnNormalSpan class='h-full text-warning mx-6'>{props.devData.totalExceptionCount}</CnNormalSpan> */}
              <RollerDigital
                class='h-full text-warning mx-6'
                endVal={props.devData.totalExceptionCount}
                bold={false}
              ></RollerDigital>
              次
            </CnNormalSpan>
            <div class='inline-block w-1 h-full bg-splitLine'></div>
            <CnNormalSpan class='h-full text-text mx-10'>
              设备故障
              <CnNormalSpan class='h-full text-warning mx-6'>
                {props.devData.devExceptionCount}
              </CnNormalSpan>
              次
            </CnNormalSpan>
            <div class='inline-block w-1 h-full bg-splitLine'></div>
            <CnNormalSpan class='h-full text-text ml-10'>
              水质异常
              <CnNormalSpan class='h-full text-warning mx-6'>
                {props.devData.paramExceptionCount}
              </CnNormalSpan>
              次
            </CnNormalSpan>
          </div>
          <CnNormalP class='flex justify-end mb-8'>
            <CnNormalSpan class='text-12 mr-16'>
              已分享
              <CnNormalSpan class='text-text mx-4'>
                {props.devData.shareUserPack.shareCount}
              </CnNormalSpan>
              人
            </CnNormalSpan>
            <CnNormalSpan class='text-12'>
              {props.devData.shareUserPack.shareNameList.join(',')}
            </CnNormalSpan>
          </CnNormalP>
          <CnNormalP class='flex justify-end'>
            <CnNormalSpan class='text-12 mr-16'>{props.devData.address}</CnNormalSpan>
            <CnNormalSpan
              class='text-12'
              style={{
                color: '#4F82AF'
              }}
            >
              {props.devData.beLongUser}
            </CnNormalSpan>
          </CnNormalP>
        </div>
      </CCard>
    )
  }
})
